<!--单元内容界面-->
<template>
<div>
  <el-menu class="el-menu-demo" background-color="#d9ecff">
    <el-menu-item style="float: left;font-size: 20px;margin-left: 10px">
      <img src="../assets/heima.png" alt="">
      <a style="margin-left: 10px">课程学习与认证管理系统</a>
    </el-menu-item>
    <el-menu-item style="float: right">
      <el-button type="primary" @click="returnLogin">退出登录</el-button>
    </el-menu-item>
  </el-menu>
  <el-row>
    <el-col :span="(!isCollapse)? 4:1" style="height: 100%;margin-top: 10px">
      <el-menu default-active="2-1" :collapse-transition="false" :collapse="isCollapse" >
        <div class="toggle-button" @click="toggleCollage">|||</div>
        <el-menu-item index="1" @click="returnCourseInformation">
          <i class="el-icon-menu"></i>
          <span slot="title" >课程信息</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">单元内容</span>
          </template>
          <el-menu-item index="2-1" @click="tip1">全部单元</el-menu-item>
          <el-menu-item index="2-2" @click="dialogFormVisible = true">添加单元</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span slot="title">用户管理</span>
          </template>
          <el-menu-item index="3-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">系统管理</span>
          </template>
          <el-menu-item index="4-1">暂未开发</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">管理员管理</span>
          </template>
          <el-menu-item index="5-1">暂未开发</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-col :span="(!isCollapse)? 19:22" style="margin-top: 10px;" :offset="1">
      <el-row>
        <el-col :span="22" style="margin-top: 20px;margin-left: 5px">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item style="font-size: x-large" :to="{ path: 'CourseManagement' }">课程管理</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large" >单元内容</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size: x-large" >全部单元</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
      <el-row >
        <el-col v-for="(item,index) in UnitList" :key="index" :span="20" :offset="3" style="background-color: aliceblue;margin: 30px"  >
          <div>
            <el-card @click.native="toUnitInformation(item)" id="item.id">
              <div slot="header" >
                <span style="font-size: x-large">{{ item.title }}</span>
                <span style="float: right">{{ '创建时间：' + item.createTime[0] + '/' + item.createTime[1] + '/' + item.createTime[2] }}</span>
              </div>
              <div>
                <span>{{item.describe}}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-dialog title="添加单元" :visible.sync="dialogFormVisible" >
    <el-form :model='addUnitForm' >
      <el-form-item label="单元序号" :label-width="formLabelWidth">
        <el-input  autocomplete="off" v-model="addUnitForm.order"></el-input>
      </el-form-item>
      <el-form-item label="单元名称" :label-width="formLabelWidth">
        <el-input  autocomplete="off" v-model="addUnitForm.title"></el-input>
      </el-form-item>
      <el-form-item label="单元描述" :label-width="formLabelWidth">
        <el-input  autocomplete="off" v-model="addUnitForm.describe"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addUnite">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { post } from '@/common/serviceUtil'

export default {
  name: 'UnitContent',
  data () {
    return {
      isCollapse: false,
      UnitList: [],
      course: {
        courseId: '' // 通过课程ID来显示所有的单元,存放课程ID
      },
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      addUnitForm: {
        courseId: '',
        order: '',
        title: '',
        describe: ''
      } // 新建课程的数据
    }
  },
  methods: {
    toUnitInformation (item) {
      console.log(item.id)
      this.$router.push({
        name: 'UnitInformation',
        path: '/UnitInformation',
        params: {
          UnitId: item.id,
          courseID: this.course.courseId
        }
      })
    },
    returnLogin () {
      post('//localhost:8088/admin/logout').then((response) => {
        console.log(response)
        if (response.data.isSuccess) {
          this.$router.push('/Login')
        } else {
          alert('呀！退出失败，请稍后再试！')
        }
      })
    },
    tip1 () {
      alert('你已经在全部单元界面啦！')
    },
    toggleCollage () {
      this.isCollapse = !this.isCollapse
    }, // 导航栏开关
    getAllUnit () {
      post('//localhost:8088/courseUnit/getAllOfCourse', this.course).then((response) => {
        console.log(response)
        this.UnitList = response.data.data
      })
    }, // 获取所有的单元
    addUnite () {
      this.dialogFormVisible = false
      if (this.addUnitForm.order !== '' && this.addUnitForm.title !== '' && this.addUnitForm.describe !== '') {
        post('//localhost:8088/courseUnit/add', this.addUnitForm).then((response) => {
          console.log(response)
          this.getAllUnit()
        })
      } else {
        alert('请输入正确的信息！')
      }
    }, // 添加新的单元
    returnCourseInformation () {
      this.$router.push({
        name: 'CourseInformation',
        path: '/CourseInformation',
        params: { CourseId: this.course.courseId }
      })
    }
  },
  mounted () {
    this.course.courseId = this.$route.params.CourseId
    this.addUnitForm.courseId = this.$route.params.CourseId
    this.getAllUnit()
  }
}
</script>

<style lang="less" scoped>
.toggle-button{
  // 添加背景颜色
  background-color: #4A5064;
  // 设置文本大小
  font-size:10px;
  // 设置文本行高
  line-height:24px;
  // 设置文本颜色
  color:#fff;
  // 设置文本居中
  text-align: center;
  // 设置文本间距
  letter-spacing: 0.2em;
  // 设置鼠标悬浮变小手效果
  cursor:pointer;
}
.el-menu-item
{
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #d9ecff;
  }
}
</style>
